<template>
  <div>
    <div class="pad-20 bgc-default">
      <div class="pad-20 bg-color-white">
        <div class="flex flex-between height-307">
          <div class="flex base-info">
            <div class="shopkeeper">店主信息</div>
            <div class="headshop-box">
              <img class="headshop" :src="member.avatar" alt="">
              <div class="align-c" v-if="member.nature === 1">招募员招募</div>
              <div class="align-c" v-if="member.nature === 2">总部招募</div>
              <div class="vip-icon-box" v-if="member.memberFlag == 1">
                <img :src="vipIcon">
              </div>
            </div>
            <div class="info-bar">
              <h3>基本信息 <el-button type="text" @click="bindSubUser">设置</el-button>
              </h3>
              <div class="flex flex-between width-280">
                <div>
                  <label>微客ID：</label>
                  <span>{{member.memberId}}</span>
                </div>
                <button type="text" class="el-button el-button--default el-button--mini copy-bar"
                  :data-clipboard-text="member.memberId" @click="doCopy" style="border: none">
                  <span style="color: #2d8cf0">复制</span>
                </button>
              </div>
              <div>
                <label>微信昵称：</label>
                <span>{{member.nickname}}</span>
              </div>
              <div>
                <label>真实姓名：</label>
                <span>{{member.realName}}</span>
              </div>
              <div>
                <label>手机号：</label>
                <span>{{member.phone}}</span>
              </div>
              <div>
                <label>注册时间：</label>
                <span>{{member.createTime}}</span>
              </div>
              <div class="flex flex-between width-280">
                <div>
                  <label>批发权限：</label>
                  <span v-if="wholesaleAuthorityFlag">已开启</span>
                  <span v-if="!wholesaleAuthorityFlag">未开启</span>
                </div>
                <!--<el-button type="text" @click="bindSubUser">账号</el-button>-->
              </div>
              <div class="flex flex-between width-280">
                <div>
                  <label>主播权限：</label>
                  <span>{{ member.anchorAuthority === 1 ? '已开启' : '未开启' }}</span>
                </div>
              </div>
              <div class="flex flex-between width-280">
                <div>
                  <label>备注：</label>
                  <span>{{member.remarkName}}</span>
                </div>
                <!--<el-button type="text" @click="editRemark">设置</el-button>-->
              </div>
            </div>
          </div>
          <div class="width-1 height-240 bg-color-g"></div>
          <div class="realname">
            <h3>实名信息</h3>
            <div class="flex flex-between width-300">
              <div>
                <label>身份证号码：</label>
                <span>{{member.cardNo}}</span>
              </div>
            </div>
            <div class="flex">
              <label>身份证照片：</label>
              <div class="flex">
                <img class="width-55 height-80" :src="member.cardPositiveUrl" alt="">
                <img class="width-55 height-80 mar-l-10" :src="member.cardReverseUrl" alt="">
              </div>
            </div>
          </div>
          <div class="width-1 height-240 bg-color-g"></div>
          <div class="charts">
            <pie-chart :pieData='pieData' v-if="pieDataFlag"></pie-chart>
          </div>
        </div>
        <div class="margin-container-list mar-t-15">
          <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="分销订单" name="1"></el-tab-pane>
              <el-tab-pane label="批发订单" name="4"></el-tab-pane>
              <el-tab-pane label="本店顾客/分销商" name="0"></el-tab-pane>
              <el-tab-pane label="更多信息" name="2"></el-tab-pane>
            </el-tabs>
          </div>
          <div v-if="memberId">
            <project-order v-if="activeName === '1'" :memberId="memberId"></project-order>
            <wholesale-order v-if="activeName === '4'" :memberId="memberId"></wholesale-order>
            <share-order v-if="activeName === '0'" :memberId="memberId"></share-order>
            <custom-info v-if="activeName == '2'" :targetId="memberId" moduleCode="1001"></custom-info>
          </div>
        </div>
      </div>
    </div>

    <!-- 拒绝通过 -->
    <el-dialog title="备注" :visible.sync="remarkVisible" :close-on-press-escape="true" width="460px">
      <div style="padding:20px;">
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="memberRemark.remarkName">
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRemark">确认</el-button>
        <el-button @click="remarkVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--设置账号-->
    <el-dialog title="设置账号" :visible.sync="setSubUserVisible" :close-on-press-escape="true" width="550px">
      <el-form :model="subUser" label-width="150px" :rules="rules" ref="subUser">
        <el-form-item label="昵称" prop="nickname">
          <div>{{subUser.nickname}}</div>
        </el-form-item>
        <el-form-item label="操作员姓名" prop="username">
          <div>
            <el-input v-model="subUser.username" placeholder="请输入操作员姓名" style="width: 300px"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="登录手机号" prop="phone">
          <div>
            <el-input v-model="subUser.phone" type="tel" placeholder="请输入手机号" maxlength="11"
              oninput="this.value=this.value.replace(/^[0,2,3,4,5,6,7,8,9]*$/gi,'')"
              onkeyup="this.value=this.value.replace(/\D/g,'')" style="width: 300px" :disabled="phoneFlag"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="所属角色" prop="subRoleId">
          <div>
            <el-select v-model="subUser.subRoleId" placeholder="请选择">
              <el-option v-for="(item, index) in subRoleList" :key="item.subRoleId" :label="item.name"
                :value="item.subRoleId" />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="店主等级">
          <div>
            <el-select v-model="memberGradeId" placeholder="请选择店主等级">
              <el-option v-for="(item, index) in gradeList" :key="item.memberGradeId" :label="item.gradeName"
                :value="item.memberGradeId">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="statusFlag" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
          <span v-if="statusFlag" style="color: #AAAAAA">(已启用)</span>
          <span v-if="!statusFlag" style="color: #AAAAAA">(已禁用)</span>
        </el-form-item>
        <el-form-item label="批发权限">
          <el-switch @change="wholesaleChange" v-model="wholesaleAuthorityFlag" active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          <span v-if="wholesaleAuthorityFlag" style="color: #AAAAAA">(已开启)</span>
          <span v-if="!wholesaleAuthorityFlag" style="color: #AAAAAA">(未开启)</span>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="remarkName" style="width: 300px">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setSubUserVisible = false">取消</el-button>
        <el-button type="primary" @click="doBindSubUser">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
  .info-bar {
    height: 240px;
    line-height: 26px;
    margin-top: 50px;
  }

  .shopkeeper {
    height: 307px;
    width: 40px;
    background-color: #409eff;
    color: white;
    word-wrap: break-word;
    /*英文的时候需要加上这句，自动换行*/
    /*自测了这句话没啥用*/
    writing-mode: vertical-rl;
    /*从左向右 从右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-rl;
    /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
    text-align: center;
    padding: 0px;
    display: flex;
    -webkit-display: flex;
    flex-direction: column;
    /* align-content: center; */
    /* vertical-align: middle; */
    justify-content: center;
    letter-spacing: 8px;
  }

  .headshop-box {
    position: relative;

    .vip-icon-box {
      position: absolute;
      top: -10px;
      right: 108px;
      transform: rotate(315deg);
    }
  }

  .select-class {
    margin-right: -5px;
    width: 120px;
  }

  .select-class-1 {
    margin-right: -5px;
    width: 160px;
  }

  .user-avatar {
    width: 90px;
    height: 90px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }

  .mar-t-50 {
    margin-top: 50px;
  }

  .headshop-box {
    padding: 0 37px 0 70px;

    .headshop {
      width: 92px;
      height: 92px;
      border-radius: 50%;
    }
  }

  .base-info {
    font-size: 14px;

    h3 {
      margin-top: 0;
    }

    label {
      color: #999999;
      width: 70px;
      display: inline-block;
    }

    .el-button {
      padding: 0;
    }
  }

  .realname {
    height: 240px;
    line-height: 26px;

    label {
      color: #999999;
      width: 90px;
      display: inline-block;
    }

    .el-button {
      padding: 0;
    }
  }

  .bg-color-g {
    background-color: #f4f4f4;
  }

  .charts {
    width: 500px;
    height: 307px;
  }
</style>

<script>
  import Detail from '@/components/Member/Detail'
  import PieChart from '@/components/Charts/PieChart'
  import projectOrder from '../components/project-order'
  import wholesaleOrder from '../components/wholesale-order'
  import shareOrder from '../components/share-order'
  import {
    getMember,
    saveMemberRemark,
    doBindSubUser,
    getBindSubUser,
    countMemberOrder,
    saveMemberGradeBatch
  } from '@/api/user/member'
  import {
    listEnterpeiseRole
  } from '@/api/system/role'
  import {
    listMemberGrade
  } from '@/api/user/memberGrade'
  import Clipboard from 'clipboard'
  import vipIcon from '@/assets/images/vip-icon.png'
  import customInfo from './custom-info'
  import {
    openOrCloseMemberRoleAuchority
  } from '@/api/user/memberRoleAuthority'

  export default {
    components: {
      Detail,
      PieChart,
      projectOrder,
      wholesaleOrder,
      shareOrder,
      customInfo
    },
    data() {
      return {
        memberId: '',
        enterpriseId: '',
        activeName: '1',
        memberGradeId: '',
        gradeList: [],
        wholesaleAuthorityFlag: false,
        statusFlag: false,
        remarkName: '',
        remarkVisible: false,
        setSubUserVisible: false,
        listLoading: false,
        pieDataFlag: false,
        pieData: [{
          name: '店主代购/自购',
          value: 0
        }, {
          name: '店主自行分销',
          value: 0
        }, {
          name: '下级顾客分销',
          value: 0
        }],
        entityList: [],
        entityListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId()
        },
        subRoleList: [],
        phoneFlag: false,
        rules: {
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          subRoleId: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],
          username: [{
            required: true,
            message: '请输入操作员姓名',
            trigger: 'blur'
          }]
        },
        memberRemark: {
          memberRemarkId: '',
          remarkType: 1,
          remarkName: '',
          memberId: '',
          userId: this.getEnterpriseId()
        },
        multipleSelection: [],
        total: 0,
        dict: {},
        subUser: {},
        member: {},
        vipIcon
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.memberId) {
        this.memberId = queryParams.memberId
      }
      this.initGetMember()
      this.initCount()
      this.listEnterpeiseRole()
    },
    methods: {
      listMemberGrade() {
        listMemberGrade(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.gradeList = response.data
        })
      },
      initGetMember() {
        getMember(this.memberId).then(response => {
          if (response.isError) return
          this.member = response.data
          if (response.data.wholesaleAuthority === 0) {
            this.wholesaleAuthorityFlag = false
          } else {
            this.wholesaleAuthorityFlag = true
          }
          this.memberGradeId = response.data.memberGradeId ? response.data.memberGradeId : ''
        })
      },
      handleClick() {},
      listEnterpeiseRole() {
        listEnterpeiseRole({
          enterpriseId: this.getEnterpriseId(),
          memberFlag: 1
        }).then(response => {
          if (response.isError) return
          this.subRoleList = response.data
        })
      },
      showDetail(row) {
        this.$router.push({
          path: '@/views/goods/order/order/detail/index',
          query: {
            orderId: row.orderId,
            memberId: row.memberId,
            shareMemberId: !row.shareMemberId ? '' : row.shareMemberId
          }
        })
      },
      initCount() {
        countMemberOrder(this.memberId).then(response => {
          if (response.isError) return
          this.pieData = [{
            name: '店主代购/自购',
            value: response.data.selfAmount
          }, {
            name: '店主自行分销',
            value: response.data.selfShareAmount
          }, {
            name: '下级顾客分销',
            value: response.data.shareAmount
          }]
          this.pieDataFlag = true
        })
      },
      doCopy() {
        const that = this
        const clipboard = new Clipboard('.copy-bar')
        clipboard.on('success', e => {
          that.$message({
            type: 'success',
            message: '信息复制成功！'
          })
          clipboard.destroy() // 使用destroy可以清楚缓存
        })
        clipboard.on('error', e => {
          that.$message({
            type: 'error',
            message: '信息复制失败！'
          })
          clipboard.destroy()
        })
      },
      editRemark() {
        this.memberRemark.memberRemarkId = this.member.memberRemarkId
        this.memberRemark.memberId = this.member.memberId
        this.remarkName = this.member.remarkName
        this.memberRemark.remarkType = '4'
        this.memberRemark.userId = this.getEnterpriseId()
      },
      submitRemark() {
        this.memberRemark.remarkName = this.remarkName
        if (this.remarkName !== '' && this.remarkName !== undefined) {
          saveMemberRemark(this.memberRemark).then(response => {
            if (response.isError) return
          })
        }
        this.initGetMember()
      },
      // 账户信息
      bindSubUser() {
        this.listMemberGrade()
        getBindSubUser(this.memberId).then(response => {
          if (response.isError) return
          this.subUser = response.data
          if (response.data.subUserId) {
            this.phoneFlag = true
          } else {
            this.phoneFlag = false
          }
          this.subUser.status = response.data.status
          if (response.data.status === 1) {
            this.statusFlag = true
          } else {
            this.statusFlag = false
          }
          this.subUser.nickname = this.member.nickname
          this.subUser.memberId = this.member.memberId
          this.setSubUserVisible = true
        })
        this.editRemark()
      },
      // 设置账户
      doBindSubUser() {
        this.$refs['subUser'].validate((valid) => {
          if (valid) {
            this.subUser.enterpriseId = this.getEnterpriseId()
            this.subUser.status = this.statusFlag ? '1' : '0'
            doBindSubUser(this.subUser).then(response => {
              if (response.isError) return
              this.$message({
                type: 'success',
                message: '成功!'
              })
              this.setSubUserVisible = false
            })
            this.submitRemark()
            if (this.memberGradeId !== '') {
              this.saveMemberGrade()
            }
          }
        })
      },
      saveMemberGrade() {
        saveMemberGradeBatch(this.memberId, this.memberGradeId).then(response => {
          if (response.isError) return
        })
      },
      wholesaleChange() {
        const wholesaleAuthority = this.wholesaleAuthorityFlag ? 1 : 0
        var query = {
          memberId: this.memberId,
          enterpriseId: this.getEnterpriseId(),
          authorityStatus: wholesaleAuthority,
          memberRoleType: 1
        }
        openOrCloseMemberRoleAuchority(query).then(response => {
          if (response.isError) return
        })
      },
      handleSizeChange(val) {
        this.entityListQuery.size = val
        this.initMemberList()
      },
      handleCurrentChange(val) {
        this.entityListQuery.currentPage = val
        this.initMemberList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        this.memberList = []
      }
    }
  }
</script>
